<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="container">
    <h2 class="text-center">添加用户</h2>
    <form action="" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2">姓  名:</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="username" placeholder="请输入邮箱" v-model="user.usernames">
            </div>

        </div>

        <div class="form-group">
            <label for="age" class="control-label col-sm-2 col-sm-offset-2">年  龄:</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="age" placeholder="请输入年龄" v-model="user.age">
            </div>

        </div>

        <div class="form-group">
            <label for="sex" class="control-label col-sm-2 col-sm-offset-2">性  别:</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="sex" placeholder="请输入性别" v-model="user.sex">
            </div>

        </div>

        <div class="form-group text-center">
            <input type="button" value="添加" class="btn btn-primary" v-on:click="add">
            <input type="button" value="重置" class="btn btn-primary" v-on:click="clear">
        </div>
    </form>

    <table class="table table-bordered table-hover">
        <caption class="h3 text-center text-info">用户列表</caption>
        <thead>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">姓名</th>
            <th class="text-center">年龄</th>
            <th class="text-center">性别</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(user,index) in users">
            <td class="text-center">{{index+1}}</td>
            <td class="text-center">{{user.usernames}}</td>
            <td class="text-center">{{user.age}}</td>
            <td class="text-center">{{user.sex}}</td>
            <td class="text-center">
                <button class="btn btn-danger" data-toggle="modal" data-target="#modal" v-on:click="nowIndex=index">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

<!--    模态框-->
    <div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">X</button>
                    <h4 class="modal-title">不会真有人要删除数据吧！</h4>
                </div>
                <div class="modal-body text-center" >
                    <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary " data-dismiss="modal" v-on:click="deletes">确定</button>
                    <button class="btn btn-primary " data-dismiss="modal" v-on:click="deletesAll">删除所有</button>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
<script src="jquery/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
    new Vue({
        el:".container",
        data:{
            nowIndex:-1,
            user:{},
            users:[
                {
                    usernames:"eh",
                    age:12,
                    sex:"男"
                },
                {
                    usernames:"syp",
                    age:15,
                    sex:"女"
                }
            ]
        },
        methods:{
          add(){
              // var Elements=this.user;
              this.users.push(this.user)
              this.user={}
          },
          clear(){

          },
          deletes(){
           this.users.splice(this.nowIndex,1);
          },
          deletesAll(){
              this.users.splice(0,this.users.length);
          }
        }
    })
</script>
</html>